/**
{
"style":{
"navigationBarTitleText":"个人信息",
"navigationStyle": "default"
}
}
*/
<template>

	<view class="page-bg">
		<view class="info-c">
			<!-- <view class="item flex-lr-tbc">
				<view class="title">
					头像
				</view>
				<view class="itme-r flex-tbc">
					<u-upload @afterRead="afterRead" name="6" :width="uploadW" :height="uploadW">
						<image :src="formData.avatar? formData.avatar : defaultImage" mode="aspectFill"
							class="upload-image"></image>
					</u-upload>
					<u-icon size="12" name="arrow-right"></u-icon>
				</view>
			</view> -->

			<view class="item1 flex-all-c">
				<view class="itme-r flex-tbc">
					<u-upload @afterRead="afterRead" name="6" :width="uploadW" :height="uploadW">
						<image :src="formData.avatar? formData.avatar : defaultImage" mode="aspectFill"
							class="upload-image"></image>
					</u-upload>

					<view class="gh">
						更换
					</view>
				</view>
			</view>

			<view class="item flex-lr-tbc">
				<view class="title">
					昵称
				</view>
				<view class="itme-r pl-40 flex_1 flex-tbc">

					<u-input v-model="formData.nickname" placeholder="请输入姓名" border="none" inputAlign="right"
						placeholderStyle="color: #9C9C9C"></u-input>
					<u-icon size="12" name="arrow-right"></u-icon>
				</view>
			</view>

			<view class="item flex-lr-tbc">
				<view class="title">
					手机号
				</view>
				<view class="itme-r pl-40 flex_1">
					{{formData.mobile}}
					<!-- <u--input v-model="formData.phone" type="number" placeholder="请输入手机号" border="none" inputAlign="right"
						placeholderStyle="color: #9C9C9C"  @change="changeInfo"></u--input>
					<image class="row-right" src="/static/images/row-r-3.png" mode=""></image> -->
				</view>
			</view>
		</view>

		<view class="plr24 mt42">
			<view class="btn-w" @click="upDataUserInfoData">
				保存
			</view>
		</view>

		<view :class="[isiPhone? 'pb-68':'pb-32', 'fixed_b']">
			<view class="footer-f" @click="onOutLogin">
				退出登录
			</view>
		</view>
		<!-- <view class="btn-out" @click="onOutLogin">退出登录</view> -->
	</view>
</template>

<script>
	// import {
	// 	getUserInfo,
	// 	upDataUserInfo
	// } from '@/apis/home.js';
	// import dImage from '__ROOT__/common/images/header-img.png'

	import {
		uploadFileSimple
	} from "@/utils/upload";

	export default {
		data() {
			return {
				uploadW: uni.upx2px(68),
				userId: '',
				isiPhone: '',
				formData: {
					id: "",
					avatar: "",
					nickname: "",
					mobile: "",
				},
				defaultImage: '__ROOT__/common/images/header-img.png'
			}
		},
		onLoad() {
			this.isiPhone = uni.getStorageSync('isiPhone');
			this.getUserInfoData()


		},
		methods: {
			afterRead(event) {
				uploadFileSimple(event, '/common/upload', (res) => {
					this.formData.avatar = res
				})
			},
			async getUserInfoData() {
				const res = await $post("/user/get_user")
				console.log(res)
				this.formData.id = res.info.id
				this.formData.avatar = res.info.avatar
				this.formData.nickname = res.info.nickname
				this.formData.mobile = res.info.mobile

			},
			async upDataUserInfoData() {
				const res = await $post("/user/save_user_info", this.formData)

				uni.showToast({
					title: '更新成功',
					icon: 'none',
					duration: 1500
				})

				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			},
			onOutLogin() {
				uni.removeStorageSync('token')
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info-c {
		margin-top: 2rpx;
		padding: 17rpx 24rpx;
		background-color: #fff;

		.item {
			padding: 25rpx 0;
		}

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #292929;
		}

		.itme-r {
			text-align: right;

			.upload-image {
				width: 68rpx;
				height: 68rpx;
				overflow: hidden;
				border-radius: 50%;
			}

			.row-right {
				width: 9rpx;
				height: 19rpx;
				margin-left: 18rpx;
			}
		}
	}

	.btn-out {
		width: 100%;
		height: 110rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #0F956E;
		text-align: center;
		line-height: 110rpx;
	}

	.item1 {
		padding-top: 55rpx;
		padding-bottom: 20rpx;


		.itme-r {
			width: 140rpx;
			height: 140rpx;
			border: 1px solid #E5E5E5;
			border-radius: 50%;
			overflow: hidden;
			position: relative;

			.gh {
				width: 134rpx;
				height: 38rpx;
				background: rgba(0, 0, 0, 0.5);
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 38rpx;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
			}

			.upload-image {
				width: 140rpx;
				height: 140rpx;
				overflow: hidden;
				border-radius: 50%;
			}
		}
	}

	.fixed_b {
		background-color: transparent !important;
	}

	.footer-f {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #348B8A;
		line-height: 48rpx;
		text-align: center;
	}
</style>